import React, { PureComponent } from "react";
import { Flex, Tabs ,Toast} from "antd-mobile";
import s from "./index.scss";
import AxFooter from "components/Footer";
import AxHeader from "components/AxHeader";
import { callApi } from "app/utils";
import zfb01 from 'assets/images/zfb01.png'
import zfb02 from 'assets/images/zfb02.png'
import zfb03 from 'assets/images/zfb03.png'
import zfb04 from 'assets/images/zfb04.png'


const tabs = [
  { title: '快捷充值', sub: '1' },
  { title: '支付宝转账', sub: '2' },
  { title: '银行转账', sub: '3' }
];
export default class extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      info: {},
      number:'',
      tabFlag:0,
    };
    this.recharge = this.recharge.bind(this)
    this.handleNum = this.handleNum.bind(this)
  }
  recharge(){
    if(this.state.number>0){
      
      callApi('/recharge/online/confirm/new',
      {
      token:JSON.parse(localStorage.getItem('userData')).token,
      amount:this.state.number,
      mobile:this.state.info.mobile
      },
      "POST").then((data)=>{
        if(data.success==true){
          location.href = data.data.ret_url
        }
      })
    }else{
      Toast.info('请输入充值数额',1)
    }
  }
  handleNum(e){
    this.setState({
      number:e.target.value
    })
  }
  componentDidMount() {

    callApi('/recharge/load/page',{token:JSON.parse(localStorage.getItem('userData')).token},"POST").then((data)=>{
      if(data.success==true){
        this.setState({
          info:data.data
        })
      }
     
    })
    
  }

  render() {
    let { info } = this.state;

    return (
      <div className={`${s.rechargeBox}`}>
        <div style={{height:'100vh',width:'100%'}}>
          <AxHeader />
          <Tabs
            tabs={tabs}
            initialPage={0}
            onChange={(tab, index) => {
              this.setState({tabFlag:index})
            }}
            onTabClick={(tab, index) => {
              console.log("onTabClick", index, tab);
              this.setState({tabFlag:index})
            }}
          >
            <div>
              <Flex className={`${s.formItem} mgtop10`}>
                <input type="number"  placeholder="￥请输入充值金额，充值金额最低1元" onChange={this.handleNum}/>
              </Flex>
              <Flex className={`${s.formItem} mgt10`}>
                账户余额:<span className={`color1`}>{info.balance}</span>
              </Flex>
              <Flex className={`${s.formItem}`}>
                中国工商银行 ({info.cardNo})
              </Flex>
              <Flex className={`${s.formItem} mgt10`}>
                限额:{info.countAmountLimit}/笔 {info.dayAmountLimit}/天
              </Flex>
              <Flex className={`${s.formItem}`}>
                手机号:{info.mobile}
              </Flex>

              <Flex className={`${s.tipBox}`} direction="column">
                <p>温馨提示</p>
	            	<p>1.最低充值金额应大于等于 1 元；</p>
	            	<p>2.选择支付宝、银行转账等方式充值后请手动刷新余额；</p>
	            	<p>3.严禁利用充值功能进行信用卡套现、转账、洗钱等行为，一经发现，将封停账号30天；</p>
	            	<p>4.若充入资金未用于投资直接提现，因江西银行会对平台进行收费，则每笔提现都将收取用户2元的手续费；</p>
	            	<p>5.具体充值限额可能会有变动，请以银行实际情况为准，如需帮助请联系客服：400-813-6661（工作日 9:30-19:00）。</p>
              </Flex>
            </div>

            <div className={`${s.twoBox}`}>
              <Flex className={`mgtop10`}><img src={zfb01} style={{width:"100%",height:"0.42rem"}}/></Flex>
              <Flex className={`${s.item}`}>
                <Flex.Item><Flex  direction="column"><Flex.Item>收款方户名</Flex.Item><Flex.Item>Account Name</Flex.Item></Flex></Flex.Item>
                <Flex.Item>{info.realName}</Flex.Item>
              </Flex>
              <Flex className={`${s.item}`}>
                <Flex.Item><Flex  direction="column"><Flex.Item>收款方账户</Flex.Item><Flex.Item>Account Number</Flex.Item></Flex></Flex.Item>
                <Flex.Item>{info.accountId}</Flex.Item>
              </Flex>
              <Flex className={`${s.item}`}>
                <Flex.Item><Flex  direction="column"><Flex.Item>收款方银行</Flex.Item><Flex.Item>Account Bank</Flex.Item></Flex></Flex.Item>
                <Flex.Item>江西银行</Flex.Item>
              </Flex>
              <Flex className={`${s.item}`}>
                <Flex.Item><Flex  direction="column"><Flex.Item>收款方开户分行</Flex.Item><Flex.Item>Bank Of Deposit</Flex.Item></Flex></Flex.Item>
                <Flex.Item>江西银行或南昌银行</Flex.Item>
              </Flex>
              <Flex  className={`mgtop10`}><img src={zfb03} style={{width:"100%",height:"2.33rem"}}/></Flex>
              <Flex  className={`mgtop10`}><img src={zfb04} style={{width:"100%",height:"5.33rem"}}/></Flex>
              <Flex>温馨提示</Flex>
              <Flex>使用支付宝转账，在超出支付宝基础免费额度（2万元）后，超出金额部分，支付宝会按照0.1%收取服务费，最低0.1元/笔。</Flex>
            </div>

            <div className={`${s.threeBox}`}>
              <Flex className={`mgtop10`}><img src={zfb02} style={{width:"100%",height:"0.42rem"}}/></Flex>
                <Flex className={`${s.item}`}>
                  <Flex.Item><Flex  direction="column"><Flex.Item>收款方户名</Flex.Item><Flex.Item>Account Name</Flex.Item></Flex></Flex.Item>
                  <Flex.Item>{info.realName}</Flex.Item>
                </Flex>
                <Flex className={`${s.item}`}>
                  <Flex.Item><Flex  direction="column"><Flex.Item>收款方账户</Flex.Item><Flex.Item>Account Number</Flex.Item></Flex></Flex.Item>
                  <Flex.Item>{info.accountId}</Flex.Item>
                </Flex>
                <Flex className={`${s.item}`}>
                  <Flex.Item><Flex  direction="column"><Flex.Item>收款方银行</Flex.Item><Flex.Item>Account Bank</Flex.Item></Flex></Flex.Item>
                  <Flex.Item>江西银行</Flex.Item>
                </Flex>
                <Flex className={`${s.item}`}>
                  <Flex.Item><Flex  direction="column"><Flex.Item>收款方开户分行</Flex.Item><Flex.Item>Bank Of Deposit</Flex.Item></Flex></Flex.Item>
                  <Flex.Item>江西银行或南昌银行</Flex.Item>
                </Flex>
                <Flex className={`mgtop10`}>温馨提示</Flex>
                <Flex className={`mgtop10`}>1、转账方式包括：银行柜台转账、网银转账、手机银行转账、ATM转账；</Flex>
                <Flex className={`mgtop10`}>2、在向电子账户转账时，必须为银行借记卡，平台暂不支持存折、信用卡转账；</Flex>
                <Flex className={`mgtop10`}>3、根据银行收费标准，在转账过程可能会收取费用。平台目前不收取任何手续费；</Flex>
                <Flex className={`mgtop10`}>4、通过ATM机转账，要24小时后才能到账；</Flex>
                <Flex className={`mgtop10`}>5、一天内转账超过5万元，必须使用key、密码器或者牌；</Flex>
                <Flex className={`mgtop10`}>6、个人转账一天内超过30万，公司超过100万，会收到银行提醒，确认之后转账才能成功；</Flex>
            </div>

          </Tabs>
        </div>
        {this.state.tabFlag==0?<Flex className={`${s.botBtn}`} onClick={this.recharge}>
          立即充值
        </Flex>:null}
        
      </div>
    );
  }
}
